<template>
    <!--  -->
    <div class="selectw">
        <!-- 
            v-model：选择的数据
            
         -->
        <el-select v-model="playCVal"  class="m-2" @change="getValS" :placeholder="placeholder" :size="large">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

    </div>
</template>

<script setup lang="ts">

import { ref,watch } from 'vue'
  let props:any=  defineProps({ // 只读的reactive
    large:{
        type:String,
        default:''
    },
    placeholder:{
        type:String,
        default:'请选择'
    },
    playcList:{  // 1异步数据 =》2js中对象这个数据进行处理 =》3怎么获取到最新的数据
        // ['全部','未开始','进行中','结束']
        type:Array
    },
    clears:{
         type:Boolean,
         default:false
    }
  })


//ui组件库要的数据结构=》后端给的数据结构可能是不同=》 自己通过js => 数组   对象方法  循环   递归

//后端给的数据不是我要的我需要处理  =》 子组件中处理



 watch(()=>props.playcList,(newVal,oldVal)=>{
       console.log(newVal,oldVal,55559);
         //变成我需要结构
         getData(newVal)
 })  
 watch(()=>props.clears,(newVal)=>{
    console.log(newVal,5555584);
    playCVal.value = ''
 })

 let  playCVal = ref('')
 let  options:any = ref([])
 const getData = (list:any)=>{ // ['全部','未开始','进行中','结束']
       list.forEach((item:any)=>{
        options.value.push({value:item,label:item}) 
       })
 }

 let emits =  defineEmits(['getSelectD']) //公共方法
// 选择了数据把数据给父组件 ，因为我们用户在父组件点击查询 ，获取到这个子组件的数据

const getValS = (val:any)=>{

    //
    emits('getSelectD',val)
    
}
</script>

<style scoped lang="scss">
.selectw{
    margin-left:10px;
}

</style>